<template>
  <div>
    <h1>新增学员</h1>
    <form class="info" autocomplete="off">
      姓名：<input type="text" class="uname" name="uname" v-model="uname" />
      年龄：<input type="text" class="age" name="age" v-model="age" />
      性别:
      <select name="gender" class="gender" v-model="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
      薪资：<input type="text" class="salary" name="salary" v-model="salary" />
      就业城市：<select name="city" class="city" v-model="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="曹县">曹县</option>
      </select>
      <button class="add" @click.prevent="add">录入</button>
    </form>

    <h1>就业榜</h1>
    <table>
      <thead>
        <tr>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>薪资</th>
          <th>就业城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <AddStudent
          v-for="(item, index) in list"
          :key="index"
          :obj="item"
          :idx="index"
          @del="delList"
        />
      </tbody>
    </table>
  </div>
</template>

<script>
import AddStudent from "./components/04-addStudent.vue";
export default {
  components: {
    AddStudent,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list")) || [
        {
          id: 2,
          uname: "2",
          age: "2",
          gender: "女",
          salary: "2",
          city: "上海",
        },
      ],
      uname: "",
      age: "",
      gender: "",
      salary: "",
      city: "",
    };
  },
  methods: {
    add() {
      if (
        !this.uname ||
        !this.age ||
        !this.gender ||
        !this.salary ||
        !this.city
      ) {
        return alert("表单内容不能为空");
      }
      this.list.push({
        id: this.list.length + 1,
        uname: this.uname,
        age: this.age,
        gender: this.gender,
        salary: this.salary,
        city: this.city,
      });
      this.uname = this.age = this.gender = this.salary = this.city = "";
    },
    delList(id) {
      console.log(id);
      this.list.splice(id, 1);
    },
  },

  watch: {
    list: {
      deep: true,
      handler(value) {
        localStorage.setItem("list", JSON.stringify(value));
      },
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #721c24;
}
h1 {
  text-align: center;
  color: #333;
  margin: 20px 0;
}
table {
  margin: 0 auto;
  width: 800px;
  border-collapse: collapse;
  color: #004085;
}
th {
  padding: 10px;
  background: #cfe5ff;

  font-size: 20px;
  font-weight: 400;
}
td,
th {
  border: 1px solid #b8daff;
}
td {
  padding: 10px;
  color: #666;
  text-align: center;
  font-size: 16px;
}
tbody tr {
  background: #fff;
}
tbody tr:hover {
  background: #e1ecf8;
}
.info {
  width: 900px;
  margin: 50px auto;
  text-align: center;
}
.info input,
.info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}
.info button {
  width: 60px;
  height: 27px;
  background-color: #004085;
  outline: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
}
.info .age {
  width: 50px;
}
</style>